<template>
  <!-- 修改绑定手机号对话框 -->
  <div class="modify">
    <el-dialog
      title="验证手机号"
      :visible.sync="isModify"
      width="45%"
      :before-close="cancel">
      <div v-show="!success">
        <el-form ref="old" :model="form" :rules="phoneValidate" label-width="100px">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入" ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="phoneCaptcha">
            <el-input v-model="form.phoneCaptcha" placeholder="请输入">
              <el-button slot="append"  class="captcha">
                <span v-if="showCode" @click="getCode('verifyPhone')">获取验证码</span>
                <span v-if="!showCode">{{ second }}s后重发</span>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="validateByPhoneWithMe('old')">下一步</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="success">
        <el-form ref="new" :model="newForm" :rules="newPhoneValidate" label-width="100px">
          <el-form-item label="新手机号" prop="newPhone">
            <el-input v-model="newForm.newPhone" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="newPhoneCaptcha">
            <el-input v-model="newForm.newPhoneCaptcha" placeholder="请输入">
              <el-button slot="append" class="captcha">
                <span v-if="showCode" @click="getCode('bindPhone')">获取验证码</span>
                <span v-if="!showCode">{{ second }}s后重发</span>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="bind('new')">绑定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>


import {validateByPhoneWithMe,sendCaptchaByType,updatePhone} from "@/project/service/manager";

export default {
  name:'modify',
  props: {
    isModify:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    const phoneValidator = (rule, value, callback) => {
      let reg = /^1[3456789][0-9]{9}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('手机号不合法'))
      }
    }
    return {
      //表单校验规则
      phoneValidate: {
        phone: [{required: true, message: '手机号不能为空', trigger: 'blur'},{validator: phoneValidator, trigger: 'blur'}],
        phoneCaptcha: [{required: true, message: '验证码不能为空', trigger: 'blur'}],
      },
      newPhoneValidate: {
        newPhone: [{required: true, message: '手机号不能为空', trigger: 'blur'},{validator: phoneValidator, trigger: 'blur'}],
        newPhoneCaptcha: [{required: true, message: '验证码不能为空', trigger: 'blur'}],
      },
      //表单
      form:{},
      newForm:{},
      success:false,//旧手机验证成功
      showCode: true,
      second: 60,
    }
  },
  watch: {
    second(val) {
      if (val === 0) {
        clearInterval(this.interval)
        this.showCode = true
        this.second = 60
      }
    },
  },
  methods: {
    // 获取验证码
    getCode(type) {
      let phone = type == 'verifyPhone' ? this.form.phone : this.newForm.newPhone
      let reg = /^1[3456789][0-9]{9}$/
      if(reg.test(phone)){
        sendCaptchaByType({phone: phone, type: type}, res=> {})
        this.showCode = false
        this.countDown()
      } else {
        this.$message.error('手机号不合法')
      }
    },
    // 验证码获取倒计时
    countDown() {
      this.interval = setInterval(() => {
        this.second--
      }, 1000)
    },
    // 旧手机号验证（下一步）
    validateByPhoneWithMe(name){
      this.$refs[name].validate(valid => {
        console.log(valid)
        if(valid){
          let captcha = this.form.phoneCaptcha
          validateByPhoneWithMe({captcha},data => {
            if(data == '204'){
              this.showCode = true
              this.success = true
              this.second = 60
              clearInterval(this.interval)
            }
          })
        }
      })
    },
    //绑定新的手机号
    bind(name){
      this.$refs[name].validate(valid => {
        if(valid){
          let phone = this.newForm.newPhone
          let captcha = this.newForm.newPhoneCaptcha
          updatePhone({phone,captcha},data => {
            console.log(data)
            if(data == '204'){
              this.$message.success('修改手机号成功')
              this.cancel()
            }
          })
        }
      })
    },
    //取消
    cancel(){
      this.$emit('close',false);
      this.success = false
      this.showCode = true
      this.form = {}
      this.newForm = {}
      clearInterval(this.interval)
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 70%;
}
/deep/ .el-input__inner {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.el-form-item {
  margin-top: 20px;

  .captcha {
    background: #1890ff;
    color: #FFFFFF;
    height: 40px;
  }
}

.dialog-footer{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
